<template>
	<div class="lc_wrap">
		<el-row class="fallen">
			<el-col :span="leftWidth">
				<div class="box treeBox">
					<basic-container>
						<lcTree @ready="ready"></lcTree>
					</basic-container>
				</div>
			</el-col>

			<el-col :span="rightWidth"  class="table-wrapper">
				<overlay @changeTreeBox="changeTreeBox"></overlay>
				<basic-container>
					<avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen" :page="page" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
						<template slot="siteNameForm">
							<el-input v-model="siteName" placeholder="请填写站点名称" disabled></el-input>
						</template>
						<template slot="siteName" slot-scope="scope">
							<el-tag style="background: 0;border: 0;color: inherit">{{ siteName }}</el-tag>
						</template>
						<template slot-scope="scope" slot="menu">
							<el-button icon="el-icon-edit" size="small" type="text" @click="edit(scope.row)" v-if="permissionList.editBtn">编 辑
							</el-button>
						</template>

						<template slot="menuLeft">
							<el-button type="danger" size="small" icon="el-icon-delete" plain @click="handleDelete" v-if="permissionList.delBtn">删 除
							</el-button>
						</template>

						<template slot="switchStatus" slot-scope="scope">
							<div v-if="scope.row.contrType === 2">-</div>
							<div v-else-if="scope.row.switchStatus === 1">开</div>
							<div v-else-if="scope.row.switchStatus === 0">关</div>
							<div v-else>-</div>
						</template>

						<template slot="contrType" slot-scope="scope">
							<div v-if="scope.row.contrType === 1">手动</div>
							<div v-else-if="scope.row.contrType === 2">自动</div>
							<div v-else>-</div>
						</template>

						<template slot="tspVal" slot-scope="scope">
							<div v-if="scope.row.contrType === 1">-</div>
							<div v-else>{{ scope.row.tspVal }}</div>
						</template>

						<template slot="sprayMode" slot-scope="scope">
							<div v-if="scope.row.sprayMode === '1'">围挡喷淋</div>
							<div v-else-if="scope.row.sprayMode === '2'">塔吊喷淋</div>
							<div v-else-if="scope.row.sprayMode === '3'">炮雾机</div>
							<div v-else>-</div>
						</template>

					</avue-crud>
				</basic-container>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { getList, getDetail, remove, update, getDeptTree, add } from "@/api/dust/fallen";
	import { mapGetters } from "vuex";
	import lcTree from "@/components/common/tree.vue";
	import overlay from "@/components/common/overlay.vue";
	export default {
		components: {
			lcTree,
			overlay
		},
		data() {
			var checkDuration = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('请输入喷淋时长'));
				}
				if(value < 1 || value > 255) {
					callback(new Error('范围：1~255min'));
				} else {
					callback();
				}
			};

			var checkVal = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('请输入PM10阈值'));
				}
				if(value < 1 || value > 255) {
					callback(new Error('范围：1~255μg/m3'));
				} else {
					callback();
				}
			};

			return {
				deptInfoId: '',
				leftWidth: this.$leftWidth,
				rightWidth: this.$rightWidth,
				currentRow: {},
				form: {},
				nodeId: null,
				props: {
					label: "title",
					value: "key",
					children: 'children'
				},
				isParentId: false,
				isSiteInfo: false,
				siteName: '',
				siteInfoId: '',
				nodeList: [],
				filterText: '',
				loading: false,
				selectionList: [],
				selectionInfoList: [],
				addInfoList: [],
				query: {},
				page: {
					pageSize: this.$pageSize,
					currentPage: 1,
					total: 0
				},
				data: [],
				option: {
					// height: 'auto',
					calcHeight: 30,
					align: 'center',
					menuAlign: 'center',
					//menuWidth: 130,
					tip: false,
					border: true,
					index: false,
					addBtn: true,
					viewBtn: false,
					delBtn: true,
					editBtn: false,
					selection: true,
					dialogClickModal: false,
					column: [{
							label: "站点名称",
							prop: "siteName",
							width: "140%",
							display: false
						},
						{
							label: "智控设备名称",
							prop: "name",
							width: "140%",
							display: false
						},
						{
							label: "智控设备MN号",
							prop: "mn",
							width: "140%",
							display: false
						},
						{
							label: "环境监测设备",
							addDisplay: false,
							editDisplay: false,
							//addDisabled:true,
							//editDisabled:true,
							placeholder: "请添加环境监测设备",
							prop: "deviceName",
							width: "140%",
							hide: true,
							//slot: true,
							//display: false
						},
						{
							label: "智控状态",
							prop: "switchStatus", //1开 0关
							//width: "100%",
							hide: true,
							display: false,
							slot: true,
						},
						{
							label: "喷淋方式",
							prop: "contrType", //1手动 2自动
							//width: "100%",
							display: false,
							slot: true,
						},
						{
							label: "喷淋时长",
							prop: "sprayingDuration",
							//width: "100%",
							display: false
						},
						{
							label: "阈值",
							//width: "100%",
							prop: "tspVal",
							display: false,
							slot: true,
						},
						{
							label: "降尘设备",
							prop: "sprayMode",
							//width: "100%",
							display: false,
							slot: true,
						},
					],
					group: [{
							label: '设备信息',
							prop: 'baseInfo',
							icon: 'el-icon-edit-outline',
							column: [{
									label: "智控设备名称",
									prop: "name",
									span: 8,
									labelWidth: 110,
									rules: [{
										required: true,
										message: "请输入智控设备名称",
										trigger: "blur"
									}],
								},
								{
									label: "智控设备MN号",
									prop: "mn",
									span: 8,
									labelWidth: 120,
									rules: [{
										required: true,
										message: "请输入智控设备MN号",
										trigger: "click"
									}]
								},
								{
									label: '环境监测设备',
									prop: 'deviceInfoIds',
									type: "select",
									dicUrl: "/api/squirrel-ficm/deviceinfo/getListByType?type=2",
									props: {
										label: "name",
										value: "id",
									},
									span: 8,
									labelWidth: 110,
									display: false,
									rules: [{
										required: false,
										message: "请输入环境监测设备",
										trigger: 'blur',
									}]
								},
								{
									label: "当前站点",
									prop: "siteName",
									span: 8,
									labelWidth: 82,
									// disabled: true,
									// rules: [{
									// 	required: false,
									// 	message: "请输入当前站点",
									// 	trigger: "blur"
									// }],
									formslot: true,
									slot: true
								},
							]
						},

						{
							label: '喷淋设置',
							prop: 'baseInfo',
							icon: 'el-icon-edit-outline',
							column: [{
									label: '喷淋方式',
									prop: "contrType",
									type: "select",
									span: 8,
									disabled: true,
									value: 2,
									dicData: [{
											label: "手动",
											value: 1
										},
										{
											label: "自动",
											value: 2
										}
									],
									rules: [{
										required: true,
										message: "请输入喷淋方式",
										trigger: "blur"
									}],
									hide: true
								},
								{
									label: "喷淋时长",
									prop: "sprayingDuration",
									span: 8,
									labelWidth: 90,
									tip: "范围：1~255min",
									rules: [{
										validator: checkDuration,
										required: true,
										trigger: "blur"
									}, ]
								},
								{
									label: '智控状态',
									prop: "switchStatus",
									span: 8,
									labelWidth: 105,
									type: "switch",
									dicData: [{
											label: "关",
											value: 0
										},
										{
											label: "开",
											value: 1
										}
									],
									rules: [{
										required: true,
										message: "请选择智控状态",
										trigger: "blur"
									}],
									hide: true
								},
								{
									label: "PM10阈值",
									prop: "tspVal",
									span: 8,
									display: false,
									tip: "范围：1~255μg/m3",
									rules: [{
										validator: checkVal,
										required: true,
										trigger: "blur"
									}]
								},
							]
						},
						{
							label: '设备选择',
							prop: 'baseInfo',
							icon: 'el-icon-edit-outline',
							column: [{
								label: '降尘设备',
								prop: "sprayMode",
								span: 8,
								type: "select",
								dicData: [{
										label: "围挡喷淋",
										value: '1'
									},
									{
										label: "塔吊喷淋",
										value: '2'
									},
									{
										label: "炮雾机",
										value: '3'
									}
								],
								rules: [{
									required: true,
									message: "请输入",
									trigger: "blur"
								}],
								hide: true
							}, ]
						},
					]
				},
			};
		},
		computed: {
			...mapGetters(["permission"]),
			permissionList() {
				return {
					addBtn: this.vaildData(this.permission.fallen_add, false),
					viewBtn: this.vaildData(this.permission.fallen_view, false),
					delBtn: this.vaildData(this.permission.fallen_delete, false),
					editBtn: this.vaildData(this.permission.fallen_edit, false)
				};
			},
			ids() {
				let ids = [];
				this.selectionList.forEach(ele => {
					ids.push(ele.id);
				});
				return ids.join(",");
			},
		},
		deviceInfoIds() {
			let deviceInfoIds = [];
			this.addData.forEach(ele => {
				deviceInfoIds.push(ele.id);
			});
			return deviceInfoIds.join(",");
		},

		mounted() {

			window.vue = this;
		},

		watch: {
			"form.contrType" (val) {
				this.form.siteInfoId = this.siteId
				this.form.siteName = this.siteName
				const switchStatus = this.findObject(this.option.group, 'switchStatus') // 智控状态
				const tspVal = this.findObject(this.option.group, 'tspVal') // PM10阈值
				switch(val) {
					case 1:
						this.$set(switchStatus, 'display', true)
						this.$set(tspVal, 'display', false)
						this.$set(this.option.group[1], 'display', true)
						break;
					case 2:
						this.$set(switchStatus, 'display', false)
						this.$set(tspVal, 'display', true)
						this.$set(this.option.group[1], 'display', true)
						break;
				}
			},

			"form.name" () {
				this.form.siteInfoId = this.siteId
				this.form.siteName = this.siteName
			}

		},

		methods: {
			ready(data, treeData) {
				this.isSiteInfo = data.nodeType == '2' ? true : false
				this.nodeId = data.key
				this.siteId = data.key //获取站点名称
				this.siteName = data.title //获取站点名称
				this.onLoad(this.page)
			},
			edit(row) {
				this.currentRow = row;
				this.$refs.crud.rowEdit(row, row.$index);
			},

			changeTreeBox() {
				this.leftWidth = this.leftWidth == this.$leftWidth ? 0 : this.$leftWidth
				this.rightWidth = this.rightWidth == this.$rightWidth ? 24 : this.$rightWidth
			},
			// nodeClick(data) {
			// 	this.nodeId = data.key
			// 	const len = this.getParent(this.treeData, data.key).length - 1 //父节点长度
			// 	this.isSiteInfo = this.getParent(this.treeData, data.key).length > 0 //修改组织树到站点 是否判断是否选择了最后一级树
			// 	this.siteId = this.getParent(this.treeData, data.key)[len].key //获取站点名称
			// 	this.siteName = this.getParent(this.treeData, data.key)[len].title //获取站点名称
			// 	this.onLoad(this.page)
			// },

			// getParent(array, key) {
			// 	let result = [];
			// 	let toToo = true;
			// 	const catchData = (array, key) => {
			// 		array.forEach(item => {
			// 			if(!toToo) return;
			// 			result.push({
			// 				'key': item['key'],
			// 				'title': item['title']
			// 			});
			// 			if(item['id'] === key) {
			// 				toToo = false;
			// 			} else if(item['children']) {
			// 				catchData(item['children'], key);
			// 			} else {
			// 				result.pop();
			// 			}
			// 		});
			// 		toToo && result.pop();
			// 	};
			// 	catchData(array, key);
			// 	return result;
			// },

			// queryDeptInfoId(arr, value) {
			// 	let key
			// 	for(var i = 0; i < arr.length; i++) {
			// 		if(arr[i].id == value) {
			// 			key = arr[i].key
			// 			break;
			// 		}
			// 	}
			// 	return key
			// },
			rowSave(row, done, loading) {
				add(row).then(() => {
					this.onLoad(this.page);
					this.$message({
						type: "success",
						message: "操作成功!"
					});
					done();
				}, error => {

					loading();
				});
			},

			rowUpdate(row, index, done, loading) {
				update(row).then(() => {
					this.onLoad(this.page);
					this.$message({
						type: "success",
						message: "操作成功!"
					});
					done();
				}, error => {

					loading();
				});
			},

			rowDel(row) {
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return remove(row.id);
					})
					.then(() => {
						this.onLoad(this.page);
						this.$message({
							type: "success",
							message: "操作成功!"
						});
					});
			},
			searchReset() {
				this.query = {};
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.query = params;
				this.page.currentPage = 1;
				this.onLoad(this.page, params);
				done();
			},

			selectionChange(list) {
				this.selectionList = list;
			},

			selectedInfoChange(list) {
				this.selectedInfoList = list;
			},

			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},

			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},

			selectionClear() {
				this.selectionList = [];
				this.$refs.crud.toggleSelection();
			},

			refreshChange() {
				this.onLoad(this.page, this.query);
			},

			handleDelete() {
				if(this.selectionList.length === 0) {
					this.$message.warning("请选择至少一条数据");
					return;
				}
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return remove(this.ids);
					})
					.then(() => {
						this.onLoad(this.page);
						this.$message({
							type: "success",
							message: "操作成功!"
						});
						this.$refs.crud.toggleSelection();
					});
			},

			beforeOpen(done, type) {
				if(type === 'add') { //新增判断
					if(this.isSiteInfo) { //如果是选择了站点可以新增 选择了企业或者上级择提示 请选择站点
						done()
					} else {
						this.$message.warning('请选择站点')
					}
				}
				if(["edit", "view"].includes(type)) {
					getDetail(this.form.id).then(res => {
						this.form = res.data.data;
						done();
					});
				}

			},

			onLoad(page, params = {}) {
				this.loading = true;
				getList(page.currentPage, page.pageSize, this.siteId, Object.assign(params, this.query)).then(res => { //,
					const data = res.data.data;
					this.page.total = data.total;
					this.data = data.records;
					this.loading = false;
					this.selectionClear();
				});
			},
		}
	};
</script>

<style lang="scss">
	.fallen {
		.el-card__body {
			height: calc(100% - 35px);
			.avue-crud {
				height: calc(100% - 125px);
			}
		}
	}
</style>
<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 500px;
	}
	
	.box {
		height: 100%;
	}
	
	.el-row {
		height: calc(100% - 20px);
	}
	
	.el-col {
		height: 100%;
		overflow: auto;
	}
	
	.search-tools {
		height: 49px;
		display: flex;
		justify-content: space-between;
		padding: 0 8px;
	}
	
	.search-left {
		display: flex;
		height: 33px;
		line-height: 33px;
	}
	
	.search-right {
		display: flex;
	}
	
	.search-tabs {
		height: 33px;
		display: flex;
		align-items: center;
		margin-right: 40px;
	}
	
	.overlay {
		position: absolute;
		width: 200px;
		height: 100%;
		opacity: 0;
		display: flex;
		align-items: center;
		padding-left: 6px;
		.tree-tool {
			height: 34px;
			width: 18px;
			background: #fff;
			box-shadow: 2px 1px 4px #ccc;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			cursor: pointer;
			display: flex;
			padding: 6px 0;
			z-index: 9999;
			.tool-line {
				margin-left: 3px;
				height: 100%;
				border-left: 1px solid #ddd;
			}
		}
	}
	
	.overlay:hover {
		opacity: 1;
	}
</style>